<template>
  <div class="home-container">
    <van-cell-group class="home-title">
      <van-cell
        title="工程项目管理模块"
        size="large"
        label="统一应用平台工程项目管理模块功能"
        icon="home-o"
        title-class="home-title-text"
      />
    </van-cell-group>
    <div class="card-container">
      <card v-for="(item,index) in navData" :key="index" @click="navCardClick(item)">
        <van-row type="flex">
          <van-col>
            <div class="flex-vertical home-list-center" style="height:100%">
              <div>
                <van-icon name="records" size="1rem" color="#1989fa" />
              </div>
            </div>
          </van-col>
          <van-col>
            <div class="flex-vertical" style="height:100%">
              <div class="home-list-title">{{ item.title }}</div>
              <div class="home-list-text">{{ item.text }}</div>
            </div>
          </van-col>
        </van-row>
      </card>
    </div>
  </div>
</template>

<script>
import {
  Button,
  Tabbar,
  TabbarItem,
  Swipe,
  SwipeItem,
  Cell,
  CellGroup,
  Icon,
  Col,
  Row,
  Toast
} from "vant";
import { mapActions, mapMutations, mapState } from "vuex"; // createNamespacedHelpers
// const { mapActions } = createNamespacedHelpers('test') // 可使用这种方式直接获得test模板
import Card from "@/components/Card";

export default {
  name: "home",
  data() {
    return {
      navData: [
        {
          title: "客户建档",
          text: "客户建档的相关操作",
          routerName: "cusAddDocsList"
        },
        
        {
          title: "集采项目报备",
          text: "集采项目报备的相关操作",
          routerName: "projectPurchaseList"
        },
        {
          title: "项目报备",
          text: "项目报备的相关操作",
          routerName: "projectReportList"
        },
        {
          title: "投标管理",
          text: "投标管理的相关操作",
          routerName: "bidManagement"
        },
        {
          title: "合同管理",
          text: "合同管理的相关操作",
          routerName: "contractList"
        }
      ]
    };
  },
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    Card
  },
  computed: {
    ...mapState({
      loading: state => state["@@loading"].effects["test/onePlusAsync"]
    })
  },
  methods: {
    add() {
      this.onePlusAsync(this.value);
    },
    addOne() {
      this.onePlus(1);
    },
    // ...mapActions('home', ['initData', 'plusPage', 'initPage']),
    ...mapActions({
      onePlusAsync: "test/onePlusAsync"
    }),
    ...mapMutations({
      onePlus: "test/onePlus",
      logout: "user/LOGOUT"
    }),
    navCardClick(item) {
      this.$router.push({
        name: item.routerName
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/_variables.scss";
.home-container {
  height: auto;
  width: 100%;
  background-image: linear-gradient(rgb(216, 231, 240), white);
}
.home-title {
  .van-cell {
    background-image: linear-gradient(white, rgb(238, 238, 238));
  }
  .home-title-text {
    font-size: 20px;
  }
}
.van-cell__left-icon {
  color: #1989fa;
}
.card-container {
  margin: 12px;
  padding: 0 12px;
  & > div {
    margin-bottom: 16px;
  }
}
.home-list-center {
  justify-content: center;
}
.home-list-title {
  font-size: 24px;
  width: 100%;
}
.home-list-text {
  opacity: 0.5;
  width: 100%;
}
</style>
